<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#div1{
				border: 1px solid red;
				position: relative;
			}
			*{
				padding: 0;
				margin: 0;
			}
			.clear:after{
				content:'';
				clear: both;
				display: block;
				height: 0;
			}
			#div1{
				margin:0px 10px;
			}
			#div11{
				margin-top: 20px;
				position: relative;
			}
			#div11 ul{
				width: 330px;
				background-color: lightblue;
				position: relative;
				float: right;
			}
			#div11 li{
				list-style-type: none;
				float: left;
				margin: 10px;
				text-align: center;
			}
			#div11 img{
				display: block;
				position: absolute;
				left: 10px;
				top: -10px;
			}
			#img{
				display: block;
				position: absolute;
				left: 0;
				top: 0;
			}
			#div2{
				margin:0px 10px;
				background-color: orange;
			}
			#div2 li{				
				display: inline-block;
				list-style-type: none;
				text-decoration: none;
				margin-left: 10px; 
				color: white;
			}
			#div2 a{
				text-decoration: none;
				color: white;
			}
			#div3{
				margin:0px 10px;
			}
			#img2{
				width:100%;
			}
			#div4{
				margin:0px 10px;
				border: 1px solid forestgreen;
				position: relative;
			}
			#img3{
				position:relative;
				display: block;
				left: -10px;
				top: 0;
			}	
			#div41{
				width: 60%;
				float: left;
			}
			#img4{
				position: absolute;
				left:25px;
				top: 40px;
			}
			#div411{
				width: 49%;
				float: left;
			}
			#div412{
				width:49%;
				float: right;
			}
			#div42{
				width: 39%;
				float: right;
				position: relative;
				margin: 3px;
			}
			#img5{
				position: absolute;
				left: 0px;
				top: -5px;
			}	
			#img6{
				position: absolute;
				left: 0px;
				top: 130px;
			}
			#div4211{
				width: 30%;
				float: left;
			}
			#div4212{
				width: 68%;
				float: right;
			}
			#div4221{
				width: 30%;
				float: left;
			}
			#div4222{
				width: 68%;
				float: right;
			}
			#div5{
				position: relative;
				font-size: 12px;
				text-align: center;
				vertical-align: middle;
				line-height: 40px;
			}
			#div5 img{
				position: absolute;
				left: 46%;
				top: 0%;
			}
		</style>
	</head>
	<body>
			<div id="div1">				
			<div id="div11" class="clear">
				<ul class="clear">				
					<li>尾品汇</li>
					<li>当当优品</li>
					<li>数字馆</li>
					<li>都看阅器</li>
					<li><img src="img/icon_count.png"/></li>
				</ul>			
			</div>
			<img id="img" src="img/logo.jpg"/>
		</div>
		<div id="div2">
			<ul>
				<li><a href="#">首页 </a></li>
				<li><a href="#">图书 </a></li>
				<li><a href="#">童装</a></li>
				<li><a href="#">服装 </a></li>
				<li><a href="#">鞋靴 </a></li>
				<li><a href="#">运动</a></li>
				<li><a href="#">箱包</a></li>
				<li><a href="#">美妆</a></li>
				<li><a href="#">珠宝</a></li>
				<li><a href="#">家居</a></li>
				<li><a href="#">食品</a></li>
				<li><a href="#">酒</a></li>
				<li><a href="#">手机</a></li>
				<li><a href="#">数码</a></li>
				<li><a href="#">电脑</a></li>
				<li><a href="#">家电</a></li>
			</ul>
		</div>
		<div id="div3">
			<img id="img2" src="img/banner.png"/>
		</div>	
		<div id="div4" class="clear">
			<img id="img3" src="img/bg_bang.gif"/>
			<div id="div41" class="clear">
				<div id="div411" class="clear">
					<img src="img/book-01.jpg"/>
				</div>
					<img id="img4" src="img/bookNo1.gif"/>
				<div id="div412">
					<span style="color:cornflowerblue ;">偷影子的人 </span><br />
						作 者：[法] 马克·李维（Marc Levy）著,段韵灵 译<br />

出版社：湖南文艺出版社<br />

当当价：<font style="color: orange;">￥ 17.90</font><br />

不知道姓氏的克蕾儿。这就是你在我生命里的角色，我童年时的小女孩，今日蜕变成了女人，一段青梅竹马的回忆，一个时间之神没有应允的愿望。 一个老是受班上同学欺负的瘦弱小男孩，因为拥有一种特殊能力而强大：他能“偷别人的影子”，因而能看见他
				</div>
			</div>
			<div id="div42">
				<div id="div421" class="clear">
					<div id="div4211">
						<img src="img/book-02.jpg"/>
					</div>
					<img id="img5" src="img/bookNo2.gif"/>
					<div id="div4212">
						<span style="color: cornflowerblue;">看见(央视知名记者、主持人柴静：十年个人成长的告白，中国社会变迁的备忘 </span><br />
作 者：柴静 著<br />

出版社：广西师范大学出版社<br />

<span style="color: orange;">￥ 29.40</span> <span style="color: cadetblue;">7.4折</span>

					</div>
				</div>
				
				<div id="div422">
					<div id="div4221">
						<img src="img/book-03.jpg"/>
					</div>
					<img id="img6" src="img/bookNo3.gif"/>
					<div id="div4222">
						<span style="color: cornflowerblue;">改变孩子先改变自己</span> <br />
作 者：贾容韬 贾毅 著<br />

出版社：作家出版社<br />

<span style="color: orange;">￥ 22.20 <span style="color: cadetblue;">7.4折</span>
					</div>
				</div>			
			</div>
		</div>
		<div id="div5">
			Copyright (C) 当当网 2004-2017, All Rights Reserved&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="img/validate.gif"/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;京ICP证041189号出版物经营许可证 新出发京批字第直0673号
		</div>
	</body>
</html>
